<template>
	<div class="w100 h100 overflow-hidden relative" id="mxcadParent">
		<canvas id="mxcad" />

		<div class="coordinate_prompt" v-show="tipCoord">{{ tipCoord }}</div>

		<!-- 图层对话框 -->
		<el-dialog title="图层" v-model="LayersShow" draggable width="400px" append-to-body>
			<my-table
				:columns="[
					{
						label: '可见',
						prop: 'off',
						width: 70,
						align: 'center'
					},
					{
						label: '颜色',
						prop: 'color',
						width: 50,
						align: 'center'
					},
					{
						label: '名称',
						prop: 'name'
					}
				]"
				:data="listLayer"
				@row-click="(row) => showLayerFn(row)"
				row-class-name="pointer"
				stripe
				size="small"
				height="300"
			>
				<template #off_header>
					<div
						class="flex s-center pointer"
						@click="
							allShow = !allShow;
							listLayer.map((item) => {
								item.off = allShow ? 0 : 1;
								MxFun.showLayer(item.id, item.off === 0);
							});
						"
					>
						<span class="m-r-5">可见</span>
						<my-icon :icon="allShow ? 'EyeOutline' : 'EyeOffOutline'" class="f-s-16" />
					</div>
				</template>
				<template #off="{ row }">
					<my-icon :icon="row.off === 0 ? 'EyeOutline' : 'EyeOffOutline'"></my-icon>
				</template>
				<template #color="{ row }">
					<div :style="{ 'background-color': row.color, width: '10px', height: '10px', display: 'inline-block' }"></div>
				</template>
			</my-table>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	loadCoreCode,
	MxFun,
	MxDbCoord,
	MxDb2LineAngularDimension,
	MxDbAlignedDimension,
	MxDbLeadComment,
	MxDbLeadTag,
	MxDbRectBoxLeadComment
} from 'mxdraw';
import GUI from 'lil-gui';

const tipCoord = ref(''),
	listLayer = ref([]),
	LayersShow = ref(false);

// 动态加载 js库核心代码
loadCoreCode().then(() => {
	MxFun.setIniset({
		// 启用对象选择功能.
		EnableIntelliSelect: true,
		correctLargeCoordinates: true
	});
	// 创建控件对象
	MxFun.createMxObject({
		canvasId: 'mxcad', // canvas元素的id
		// 如果访问的资源存在跨域问题， 请参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#http_%E5%93%8D%E5%BA%94%E6%A0%87%E5%A4%B4%E5%AD%97%E6%AE%B5 解决
		// 转换后的文件是多个.wgh的文件构成， 但是我们只需要得到前缀，就可以访问，
		// 比如:../../demo/buf/$hhhh.dwg 我们可以直接写成cadFile: "../../demo/buf/hhhh.dwg"
		// 转换后的文件
		cadFile: '/demo/buf/$盘区五年规划图.dwg',
		useWebsocket: false,
		isAutoResize: true,
		callback: (mxDraw) => {
			// 拿到图层数据
			mxDraw.addEvent('uiSetLayerData', (data) => {
				allShowFn(data);
				listLayer.value = data.map(({ name, id, off, color, zerolayer }) => ({ name, id, off, color, zerolayer }));
			});
			// mxDraw.zoomScale(2);
			mxDraw.initRendererParam({ preserveDrawingBuffer: true });
			// 对象被选择的通知事件 。
			mxDraw.on('MxEntitySelectChange', (aryId) => {
				if (aryId.length > 0) {
					console.log(true);
				} else {
					console.log(false);
				}
			});
			// 是否编辑夹点 。
			mxDraw.on('whetherEditTheGripPoint', () => true);
			// 只打开端点捕捉
			mxDraw.setSysVar('OSMODE', 1);
		}
	});

	MxFun.listenForCoordTip((val) => {
		tipCoord.value = val;
	});

	const uiParams = {
		save() {
			const res = MxFun.getCurrentDraw().saveMxEntityToJson();
			localStorage.setItem('mx-data', res);
			msgSuccess('保存批注成功 可刷新页面 点恢复批注');
		},
		restore() {
			MxFun.getCurrentDraw().loadMxEntityFromJson(localStorage.getItem('mx-data'));
			MxFun.updateDisplay();
		},
		delAll() {
			MxFun.getCurrentDraw().eraseAllMxEntity();
			MxFun.updateDisplay();
		},
		delEntity() {
			const mxObj = MxFun.getCurrentDraw(),
				aryId = mxObj.getMxCurrentSelect();
			if (aryId.length != 0) {
				aryId.forEach((val) => {
					mxObj.eraseMxEntity(val);
				});
				mxObj.updateDisplay();
			}
		},
		refresh() {
			location.reload();
		},
		useMxDbCoord() {
			MxDbCoord.use();
		},
		useMxDb2LineAngularDimension() {
			MxDb2LineAngularDimension.use();
		},
		useMxDbAlignedDimension() {
			MxDbAlignedDimension.use();
		},
		useMxDbLeadComment() {
			MxDbLeadComment.use();
		},
		useMxDbLeadTag() {
			MxDbLeadTag.use();
		},
		useMxDbRectBoxLeadComment() {
			MxDbRectBoxLeadComment.use();
		},
		LayersShow() {
			LayersShow.value = true;
		}
	};

	const gui = new GUI({
			width: 150,
			container: document.getElementById('mxcadParent')
		}),
		layer = gui.addFolder('图层显隐'),
		base = gui.addFolder('基础功能'),
		draw = gui.addFolder('批注功能');

	layer.add(uiParams, 'LayersShow').name('图层');
	base.add(uiParams, 'save').name('保存批注');
	base.add(uiParams, 'restore').name('恢复批注');
	base.add(uiParams, 'delEntity').name('删除批注');
	base.add(uiParams, 'delAll').name('删除全部批注');
	base.add(uiParams, 'refresh').name('刷新页面');

	draw.add(uiParams, 'useMxDbCoord').name('引线坐标');
	draw.add(uiParams, 'useMxDb2LineAngularDimension').name('角度测量批注');
	draw.add(uiParams, 'useMxDbAlignedDimension').name('尺寸标注');
	draw.add(uiParams, 'useMxDbLeadComment').name('引线文字标注');
	draw.add(uiParams, 'useMxDbLeadTag').name('引出标注');
	draw.add(uiParams, 'useMxDbRectBoxLeadComment').name('引线审图标注');
});

// 图层隐藏显示
const allShow = ref(true);
function allShowFn(data) {
	if (data.some((item) => item.off === 1)) allShow.value = false;
}

function showLayerFn(row) {
	if (row.off === 0) {
		row.off = 1;
	} else {
		row.off = 0;
	}
	MxFun.showLayer(row.id, row.off === 0);
	MxFun.updateDisplay();
}
</script>

<style lang="scss" scoped>
#mxcadParent {
	:deep() {
		> .lil-gui {
			position: absolute;
			top: 0;
		}
	}
	.coordinate_prompt {
		padding: 1px 20px;
		background-color: rgba(85, 85, 85, 0.5);
		color: #fff;
		border-radius: 10px;
		position: absolute;
		bottom: 0;
		right: 0;
		font-size: 18px;
	}
}
</style>
